{% extends "base.html" %}
{% load static %}

{% block title %}测试报告列表{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">测试报告列表</h2>
    
    <!-- 筛选表单 -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="project" class="form-label">项目</label>
                    <select name="project" id="project" class="form-select">
                        <option value="">全部</option>
                        {% for project in projects %}
                        <option value="{{ project.id }}" {% if request.GET.project == project.id|stringformat:"i" %}selected{% endif %}>
                            {{ project.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="start_date" class="form-label">开始日期</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" 
                           value="{{ request.GET.start_date }}">
                </div>
                <div class="col-md-3">
                    <label for="end_date" class="form-label">结束日期</label>
                    <input type="date" class="form-control" id="end_date" name="end_date"
                           value="{{ request.GET.end_date }}">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary">筛选</button>
                    <a href="{% url 'report_list' %}" class="btn btn-secondary ms-2">重置</a>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 报告列表 -->
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>报告名称</th>
                    <th>项目</th>
                    <th>总用例数</th>
                    <th>通过数</th>
                    <th>失败数</th>
                    <th>错误数</th>
                    <th>跳过数</th>
                    <th>通过率</th>
                    <th>执行时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for report in reports %}
                <tr>
                    <td>{{ report.name }}</td>
                    <td>{{ report.project.name }}</td>
                    <td>{{ report.total_cases }}</td>
                    <td class="text-success">{{ report.passed_cases }}</td>
                    <td class="text-danger">{{ report.failed_cases }}</td>
                    <td class="text-danger">{{ report.error_cases }}</td>
                    <td class="text-warning">{{ report.skipped_cases }}</td>
                    <td>
                        <div class="progress" style="height: 20px;">
                            {% with pass_rate=report.passed_cases|div:report.total_cases|mul:100 %}
                            <div class="progress-bar bg-success" role="progressbar" 
                                 style="width: {{ pass_rate }}%;" 
                                 aria-valuenow="{{ pass_rate }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                                {{ pass_rate|floatformat:1 }}%
                            </div>
                            {% endwith %}
                        </div>
                    </td>
                    <td>{{ report.start_time|date:"Y-m-d H:i:s" }}</td>
                    <td>
                        <div class="btn-group">
                            <a href="{% url 'report_detail' report.id %}" class="btn btn-sm btn-info">
                                查看
                            </a>
                            <a href="{{ report.html_report.url }}" class="btn btn-sm btn-secondary" target="_blank">
                                HTML
                            </a>
                            <a href="{{ report.json_report.url }}" class="btn btn-sm btn-secondary" target="_blank">
                                JSON
                            </a>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="10" class="text-center">暂无测试报告</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 分页 -->
    {% if is_paginated %}
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1">&laquo; 首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
            </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
            <li class="page-item active">
                <span class="page-link">{{ num }}</span>
            </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item">
                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
            </li>
            {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 日期选择器初始化
    $('#start_date, #end_date').on('change', function() {
        var startDate = $('#start_date').val();
        var endDate = $('#end_date').val();
        
        if (startDate && endDate && startDate > endDate) {
            alert('开始日期不能大于结束日期');
            $(this).val('');
        }
    });
});
</script>
{% endblock %} 